<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { userStore } from '@/stores/user.js'

const user = userStore()
console.log('app.vue use.keepAliveInclude',user.keepAliveInclude)
const route = useRoute()

const useIsShowIframe = () => {
  const WIDTH = 500
  const width = ref(
    document.documentElement.clientWidth || document.body.clientWidth
  )
  const isPhone = ref(false)
  const noShowIframe = ref(isPhone.value || width.value <= WIDTH)
  const info = navigator.userAgent
  isPhone.value = /mobile/i.test(info)
  // const src = ref(`${window.location.protocol}//${window.location.host}/index.html`)
  const src = ref(`${window.location.host}/index.html`)
  return { noShowIframe, WIDTH, src }
}
const { noShowIframe, WIDTH, src } = useIsShowIframe()
let innerHeight = ref(window.innerHeight)
window.onresize = function () {
  innerHeight = window.innerHeight
}
</script>

<template>
  <div id="app_box" :style="{ height: `${innerHeight}px` }">
    <div
      v-if="noShowIframe"
      id="box"
      :style="{
        width: noShowIframe ? '100vw' : `${WIDTH}px`,
        height: `${innerHeight}px`,
      }"
    >
      <router-view v-slot="{ Component }">
        <keep-alive :include="user.keepAliveInclude">
          <component :is="Component" :key="route.name" />
        </keep-alive>
      </router-view>
    </div>
    <div v-else :style="{ width: `${WIDTH}px` }">
      <iframe
        :style="{ width: `${WIDTH}px`, height: `${innerHeight}px` }"
        :src="src"
      ></iframe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url('@/assets/fonts/fonts.css');
#app_box {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  #box {
    overflow: hidden;
  }
}
body {
  font-family: appFont;
}
</style>
